<%--
  Created by IntelliJ IDEA.
  User: yinshankun
  Date: 2020/10/30
  Time: 10:34尹山坤
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <script src="<%=path%>/ysk/js/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/ysk/css/stylerepair.css" />
    <title>Title</title>
    <style type="text/css">
        #repair1{
            width: 120px;
            height: 30px;
        }
        #repair2{
            background-color: red;
            width: 50px;
            height: 30px;
        }
        #repair4{
            width: 20px;
            height: 20px;


        }
        #repair5{
   display: none;
            float: right;
            margin-right: 300px;
            margin-top: 3px;
        }
    </style>
</head>
<body>


<section class="met_section  ">

    <article>
        <div class="met_article">
            <section class="met_article_head">
                <h1>预约维修</h1>

            </section>
            <div class="met_clear"></div>
            <div id="messagelist">
                <form  method="POST" enctype="multipart/form-data"  id="myform"  action="<%=path%>/user/picture">
                    <div class="v52fmbx">

                        <h3 class="v52fmbx_hr">下单</h3>
                        <dl>
                            <dt class="ftype_select">姓名</dt>
                            <dd class="ftype_input">
                                <div class="fbox">
                                    <input  id="name" name="username" type="text" placeholder="姓名" data-required=1 />
                                </div>
                                <span class="tips"></span> </dd>
                        </dl>
                        <dl>
                            <dt class="ftype_select">联系电话</dt>
                            <dd class="ftype_input">
                                <div class="fbox">
                                    <input name="phonenum" type="text" placeholder="联系电话" id="telnum"  />
                                </div>
                                <span class="tips"></span> </dd>
                        </dl>
                        <dl >
                            <dt class="ftype_select">地址</dt>
                            <dd class="ftype_input">
                                <div class="fbox" >

                                 <select id="district" >

                                     <c:forEach items="${requestScope.districts}" var="dis">
                                     <option  value=${dis.id} >${dis.districtName}</option>
                                     </c:forEach>
                                 </select >

                                <select id="town">



                                    </select>

                                    <select id="community">

                                    </select>
                                    <input type="text" id="repair1" placeholder="详细地址">
                                    <input type="button" id="repair2" value="完成">
                                    <span id="repair5"><img id="repair4" src="<%=path%>/ysk/images/dui.png"></span>
                                    <input name="address" id="repair3" type="hidden" >
                                </div>
                                <span class="tips"></span> </dd>
                        </dl>

                        <dl>
                            <dt class="ftype_select">预约时间</dt>
                            <dd class="ftype_input">
                                <div class="fbox">
                                    <select name="timetable"  id="pointtime">
                                        <c:forEach  items="${requestScope.timetables}" var="tt">
                                        <option  value=${tt.id}>${tt.shijianduan}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <span class="tips"></span> </dd>
                        </dl>
                        <dl>
                            <dt class="ftype_select">故障照片</dt>
                            <dd class="ftype_input">
                                <div class="fbox">
                                    <input name="pic" type="file"data-required=1 />
                                </div>
                                <span class="tips"></span> </dd>
                        </dl>
                        <dl>
                            <dt class="ftype_select">故障描述</dt>
                            <dd class="ftype_textarea">
                                <div class="fbox">
                                    <textarea name="describe"  data-required=1 id="des" ></textarea>
                                </div>
                                <span class="tips"></span> </dd>
                        </dl>
                        <dl class="noborder">
                            <dt>&nbsp;</dt>
                            <dd>
                                <input type="submit"  value="提交信息" />
                            </dd>
                        </dl>
                    </div>
                </form>
            </div>
        </div>
    </article>
    <div class="met_clear"></div>
</section>


</body>
</html>



<script type="text/javascript">
     $("#myform").submit(check)

    function check() {
         var flag=false;
        var info=$("#repair1").val();
        var num=$("#repair3").val();
        var f=$("#repair5").css("display");


        if(info!=""&&info!=null&&num!=""&&num!=null&&f=="block")
        {
           flag=true;

        }
        else {
            alert(请选择地址并完成)
            flag=false
        }

        return flag;


    }

</script>
<!--  乡镇列表 -->
<script  type="text/javascript">

    $(function () {
        $("#district").change(function () {
            $("#town").html("");
            $("#community").html("");
            var num=$("#district").val()


            $.ajax({
                url:"<%=path%>/districtnum",
                type:"post",
                data:{num,num},
                async:false,
                success:function (mes) {

                    $("#town").html("");


                    for(var i=0;i<mes.length;i++)
                    {
                        var opt = $("<option></option>");
                        opt.html(mes[i].townName);
                        opt.val(mes[i].id);
                        $("#town").append(opt);
                    }


                }
            })
        })
    })


</script>

<!--  村列表 -->
<script  type="text/javascript">

    $(function () {
        $("#town").change(function () {
            $("#community").html("");
            var num=$("#town").val()


            $.ajax({
                url:"<%=path%>/communitynum",
                type:"post",
                data:{num:num},
                async:false,
                success:function (mes) {



                    for(var i=0;i<mes.length;i++)
                    {
                        var opt = $("<option></option>");
                        opt.html(mes[i].communityName);
                        opt.val(mes[i].id);
                        $("#community").append(opt);
                    }


                }
            })
        })
    })


</script>
<script type="text/javascript">
    <!--ajax把地址写入地址表-->
    $("#repair2").click(function () {
        $("#repair5").css("display","block");
        var com=$("#community").val();

        var address=$("#repair1").val();

        $.ajax({
            url:"<%=path%>/user/adddizhi",
            async:false,
            method:"post",
            data:{com:com,address:address},
            success:function (mes) {

            }
        })


    })
    <!--根据用户id获取最大的 设置到隐藏域中  发布订单时设置为2  并把其他的删掉-->
    $("#repair2").blur(function () {

            $.ajax({
                url:"<%=path%>/user/getmaxaddressid",
                method: "post",
                async:false,
                success:function (mes) {

                    $("#repair3").val(mes);
                }
            })
    })



</script>



